<script setup>
import BottomRow from "../components/BottomRow.vue";
import TopRow from "../components/TopRow.vue";
import axios from "axios";
import router from "../router";
import { PathEnum } from "../assets/PathEnum";
</script>

<script>
export default {
  data() {
    return {
      nftName: "",
      description: "",
      amount: "",
      complete: false,
      alerts: "",
    };
  },
  methods: {
    postnftname() {
      let inputElement = document.getElementById("uFile");
      let file = inputElement.files[0];

      if (
        this.nftName.length < 1 ||
        this.nftName.length > 30 ||
        this.description.length < 1 ||
        this.description.length > 150 ||
        this.amount > 10 ||
        this.amount < 0 ||
        file === undefined
      ) {
        this.complete = false;
      } else this.complete = true;

      if (this.complete == true) {
        this.alerts = "";
        let param = new FormData(); // 创建form对象
        param.append("Img", file); // 通过append向form对象添加数据
        param.append("UserName", localStorage.loginUserName);
        param.append("NftName", this.nftName);
        param.append("Description", this.description);
        param.append("Amount", this.amount);
        console.log(param.get("img"));
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
          maxContentLength: 100000000,
          maxBodyLength: 100000000,
        };
        router.push("/");
        axios
          .post(PathEnum.releasePath.create, param, config)
          .then((res) => {
            console.log(res);
            router.push("/");
          })
          .catch((err) => {
            console.log(err);
            router.push("/");
          });
      } else {
        this.alerts = "请检查输入是否符合要求";
      }
    },

    showPicture() {
      let inputElement = document.getElementById("uFile");
      let picElement = document.getElementById("pic");
      let file = inputElement.files[0];

      var reader = new FileReader();

      reader.addEventListener(
        "load",
        function () {
          picElement.src = reader.result;
        },
        false
      );

      if (file) {
        reader.readAsDataURL(file);
      }
    },
  },
};
</script>

<template>
  <main>
    <div class="total">
      <TopRow title="铸造" />
      <BottomRow />
      <div class="titlebox">
        <div class="text">标题</div>
        <input
          class="inputbox1"
          v-model="nftName"
          type="text"
          name="nftname"
          placeholder="请输入NFT名称，不超过30个字"
        />
        <div class="text2">描述</div>
      </div>
      <div class="titlebox1">
        <textarea
          class="inputbox2"
          v-model="description"
          type="text"
          name="description"
          placeholder="请输入NFT介绍，不超过200个字"
        >
        </textarea>
        <div class="textD1">上传NFT</div>
      </div>
      <div class="root">
        <div class="picture">
          <input
            class="file"
            type="file"
            id="uFile"
            name="uFile"
            @change="showPicture"
          />

          <img src="@/assets/UI/uploading.png" alt="" id="pic" class="pic" />
        </div>
      </div>
      <div class="titlebox3">
        <div class="text3">数量</div>
        <input
          class="inputbox3"
          v-model="amount"
          type="text"
          name="amount"
          placeholder="请输入铸造数量"
        />
      </div>
      <div class="titlebox4">
        <div class="error_notice">{{ this.alerts }}</div>
        <div @click="postnftname" class="title4">铸造</div>
      </div>
    </div>
  </main>
</template>

<style scoped>
.total {
  align-items: flex-start;
  position: absolute;
  left: 8px;
  top: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
  padding: 0px;
  gap: 8px;
  position: absolute;
  width: 375px;
  height: 850px;
  left: calc(50% - 375px / 2);
  top: 88px;
}
.file {
  position: absolute;
  width: 121px;
  height: 121px;
  left: 0px;
  top: 0px;
  line-height: 0px;
  border-radius: 10px;
  opacity: 0;
}
.titlebox {
  position: absolute;
  width: 375px;
  height: 56px;
  top: 10px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  background: #ffffff;
}
.pic {
  width: 121px;
  height: 121px;
}
.titlebox3 {
  position: absolute;
  width: 375px;
  height: 56px;
  top: 490px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  background: #ffffff;
}

.error_notice {
  position: absolute;
  width: 272px;
  height: 20px;
  left: calc(50% - 343px / 2);
  top: -30px;

  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;

  color: #ff0000;
}

.inputbox1 {
  position: absolute;
  height: 40px;
  left: 80px;
  right: 30px;
  top: 8px;
  background-color: #ffffff;
  border: 0;
  outline: none;
  line-height: 56px;
  padding-left: 5px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #000000;
}
.inputbox2 {
  position: absolute;
  height: 130px;
  width: 350px;
  left: 10px;
  top: 10px;
  background-color: #ffffff;
  border: 0;
  outline: none;
  line-height: 30px;
  padding-left: 5px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #000000;
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  /* overflow: hidden; */
  resize: none;
  border-radius: 10px;
}
.inputbox3 {
  position: absolute;
  height: 40px;
  left: 80px;
  right: 30px;
  top: 8px;
  background-color: #ffffff;
  border: 0;
  outline: none;
  line-height: 56px;
  padding-left: 5px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  color: #000000;
}
.titlebox1 {
  position: absolute;
  width: 375px;
  height: 152px;
  top: 130px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  background: #ffffff;
  white-space: pre-wrap;
  word-break: break-all;
}
.titlebox4 {
  position: absolute;
  width: 343px;
  height: 40px;
  left: 15px;
  top: 600px;
  z-index: 3;
  background: #7342ff;
  border-radius: 20px;
}

.title4 {
  position: absolute;
  width: 28px;
  height: 20px;
  left: calc(50% - 28px / 2 + 0.5px);
  top: calc(50% - 20px / 2);
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  /* identical to box height */
  text-align: center;
  color: #ffffff;
}
.textD {
  position: absolute;
  height: 24px;
  left: 15px;
  right: 93px;
  top: 10px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  /* identical to box height */
  color: #000000;
  mix-blend-mode: normal;
  opacity: 0.3;
}
.textD1 {
  position: absolute;
  width: 100px;
  height: 80px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 370px;
  left: 15px;
  /* identical to box height */
  color: rgba(0, 0, 0, 0.9);
  mix-blend-mode: normal;
  opacity: 0.9;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}
.text {
  position: absolute;
  width: 34px;
  height: 24px;
  left: 15px;
  top: calc(50% - 24px / 2);
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  /* identical to box height */
  color: rgba(0, 0, 0, 0.9);
  mix-blend-mode: normal;
  opacity: 0.9;
}
.text1 {
  position: absolute;
  width: 251px;
  height: 24px;
  left: 110px;
  top: calc(50% - 24px / 2);
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  /* identical to box height */
  color: #000000;
  mix-blend-mode: normal;
  opacity: 0.3;
}

.text2 {
  position: absolute;
  width: 34px;
  height: 80px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 180px;
  left: 15px;
  /* identical to box height */
  color: rgba(0, 0, 0, 0.9);
  mix-blend-mode: normal;
  opacity: 0.9;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
}
.text3 {
  position: absolute;
  width: 34px;
  height: 24px;
  left: 15px;
  top: calc(50% - 24px / 2);
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  /* identical to box height */
  color: rgba(0, 0, 0, 0.9);
  mix-blend-mode: normal;
  opacity: 0.9;
}
.picture {
  position: absolute;
  width: 121px;
  height: 121px;
  left: 15px;
  top: 335px;
  line-height: 0px;
  border-radius: 10px;
}
.picture img {
  width: 121px;
  height: 121px;
  object-fit: cover;
}
.root {
  position: absolute;
  width: 121px;
  height: 121px;
  /* Inside auto layout */
  top: 10px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}
</style>
